<template>
  <div>
    <header class="custom-header">
      <div class="logo-container">
        <div class="logo">
          <img src="@/assets/icon/Logo.png" alt="Logo" class="icon" />
          <span class="site-name">红星党建</span>
        </div>
      </div>

      <nav class="custom-nav">
        <router-link
          v-for="item in menuItems"
          :key="item.path"
          :to="item.path"
          class="nav-item"
          active-class="active"
        >
          {{ item.name }}
        </router-link>
      </nav>

      <div class="avatar-container">
        <el-dropdown @command="handleCommand">
          <span class="avatar">
            <img src="@/assets/icon/Logo.png" alt="头像" class="avatar-icon" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="personal-center">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>

    <main>
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { userInfoService } from '@/api/user.js';
import useUserInfoStore from '@/stores/userInfo.js';
import { useTokenStore } from '@/stores/token.js';

const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();

const isDropdownVisible = ref(false);
const router = useRouter();

const menuItems = [
  { name: '首页', path: '/user/home' },
  { name: '党建地点', path: '/user/location' },
  { name: '论坛', path: '/user/forum' },
  { name: '公告资讯', path: '/user/news' },
  { name: '商城', path: '/user/store' },
  { name: '个人中心', path: '/user/profile' }
];

const handleCommand = (command) => {
  if (command === 'personal-center') {
    router.push('/personal-center');
  } else if (command === 'logout') {
    alert("退出登录");
    // 处理退出逻辑，例如清除 token
  }
};

// 获取用户信息的函数
const getUserInfo = async () => {
  try {
    const result = await userInfoService();
    userInfoStore.setInfo(result.data);
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
};

// 在组件挂载时获取用户信息
onMounted(() => {
  getUserInfo();
});
</script>

<style scoped src="../styles/LayoutPage.scss">

</style>
